<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <input type="hidden" class="goodsId" value="${goods.goodsId}">
            <input style="width: 250px"  type="text" name="goodsName"   required  lay-verify="required" placeholder="请输入商品名称" autocomplete="off" class="layui-input goodsName" value="${goods.goodsName}" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品单价</label>
        <div class="layui-input-block">
            <input style="width: 250px"  type="text" name="goodsPrice"   required  lay-verify="number" placeholder="请输入商品单价  " autocomplete="off" class="layui-input goodsPrice"  value="${goods.goodsPrice}" />
        </div>
    </div>
    <div class="layui-form-item" style="width: 360px">
        <label class="layui-form-label">品牌</label>
        <div class="layui-input-block">
            <select name="brand"  class="layui-input brand">
                <c:forEach items="${listBrand}" var="listBrand">
                    <option value="${listBrand.brandId}">${listBrand.brandName}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <%--    <div class="layui-form-item">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-block">
                <input style="width: 250px" type="text" name="goodsQuantity" required  lay-verify="required" placeholder="请输入数量" autocomplete="off" class="layui-input goodsQuantity"  />
            </div>
        </div>--%>
    <div class="layui-form-item" style="width: 360px">
        <label class="layui-form-label">一级分类</label>
        <div class="layui-input-block">
            <select name="relationShipOne"  class="layui-input relationShipOne" lay-filter="relationship">
                <c:forEach items="${relationShipList}" var="relationShipList">
                    <option value="${relationShipList.relationshipId}">${relationShipList.relationshipName}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="width: 360px">
        <label class="layui-form-label">二级分类</label>
        <div class="layui-input-block">
            <select name="relationShipTwo"  class="layui-input relationShipTwo">

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">容量</label>
        <div class="layui-input-block">
            <input style="width: 250px" type="text" name="capacity" required  lay-verify="required" placeholder="请输入容量" autocomplete="off" class="layui-input capacity"  value="${goods.capacity}" />
        </div>
    </div>
    <%--    <div class="layui-form-item" style="width: 360px">
            <label class="layui-form-label">所属货架</label>
            <div class="layui-input-block">
                <select name="storgageRack"  class="layui-input storgageRack">
                    <c:forEach items="${storgageRacksList}" var="storgageRacksList">
                        <option value="${storgageRacksList.storgageRackId}">${storgageRacksList.storgageRackName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>--%>
    <div class="layui-form-item" style="width: 360px">
        <label class="layui-form-label">单位</label>
        <div class="layui-input-block">
            <select name="specifiCations"  class="layui-input specifiCations" lay-filter="relationship">
                <option value="瓶">瓶</option>
                <option value="箱">箱</option>
                <option value="个">个</option>
                <option value="盒">盒</option>
            </select>
        </div>
    </div>
    <div>

    </div>

    <%--    <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="goodsState" lay-skin="switch" lay-text="在售|下架" value="在售" class="goodsState">
            </div>
        </div>--%>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="upload">
                <i class="layui-icon">&#xe67c;</i>上传图标
            </button>
            <br><br>
            <div style="width:200px;height:200px;border:3px solid #0099CC;border-radius: 5px;padding: 3px;">
                <img style="max-width: 200px;max-height:200px;" id="preview" src="${goods.goodsImg}">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">

            <button type="button" id="goodsSubmit" class="layui-btn" lay-submit lay-filter="userUpdateForm">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>



<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>
<script src="static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="static/lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'layer', 'upload'], function () {
        var layer = layui.layer;
        var upload = layui.upload;
        var $ = layui.jquery;
        var form = layui.form;


        //加载之前先默认根据父查询到子
        $(function (){
            //先把对应的下拉信息选中
            $(".brand").val("${goods.brand.brandId}");
            $(".relationShipOne").val("${goods.relationShipOne.relationshipId}");
            $(".specifiCations").val("${goods.specifiCations}")
            form.render('select');



            //发送异步请求,根据当前编号查询底下所有子类
            $.post('relationShip/selectPidAll',{relationshipId:$(".relationShipOne").val()},function (result){
                var relationshipList = JSON.parse(result.data);
                //清空先
                $(".relationShipTwo").empty();
                for (let i =0;i<relationshipList.length;i++){
                    $(".relationShipTwo").append(" <option value='"+relationshipList[i].relationshipId+"'>"+relationshipList[i].relationshipName+"</option>");
                }
                //查出来选择一下
                $(".relationShipTwo").val("${goods.relationShipTwo.relationshipId}");
                //刷新组件
                form.render('select');
            })

        })
        //选择一级菜单事件
        form.on('select(relationship)',function(data){
            //发送异步请求,根据当前编号查询底下所有子类
            $.post('relationShip/selectPidAll',{relationshipId:data.value},function (result){
                var relationshipList = JSON.parse(result.data);
                //清空先
                $(".relationShipTwo").empty();
                for (let i =0;i<relationshipList.length;i++){
                    $(".relationShipTwo").append(" <option value='"+relationshipList[i].relationshipId+"'>"+relationshipList[i].relationshipName+"</option>");
                }
                //刷新组件
                form.render('select');
            })
        });

        upload.render({
            elem: '#upload',
            url: 'goods/updateGoods',
            auto: false,//选择文件后不自动上传
            bindAction: '#goodsSubmit',
            //进行文件上传
            before: function () {
                /*    var goodsState = null;
                    if ($(".goodsState").is(':checked')){
                        goodsState=$(".goodsState").val();
                    }else{
                        goodsState = "下架";
                    }*/
                this.data = {
                    goodsId:$(".goodsId").val(),
                    name: $('input[name="name"]').val(),
                    goodsName: $(".goodsName").val(),
                    goodsPrice:$(".goodsPrice").val(),
                    brand:$(".brand").val(),
                    /*  goodsQuantity:$(".goodsQuantity").val(),*/
                    relationShipOne:$(".relationShipOne").val(),
                    relationShipTwo:$(".relationShipTwo").val(),
                    capacity:$(".capacity").val(),
                    /*   storgageRack:$(".storgageRack").val(),*/
                    specifiCations:$(".specifiCations").val(),
                    /*  goodsState:goodsState*/
                }

            },
            //选择文件后的回调
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#preview').attr('src', result);
                })
            },
            //操作成功的回调
            done: function (res) {
                layer.alert(res.msg, {icon: 1}, function () {
                    parent.window.location.reload();
                })
            },
            //上传错误回调
            error: function (result) {

            }
        });

    })
</script>
</body>
</html>